<template>
	<view>
		<view class="padding-lr bg-white">
			<view class="text-bold text-xl padding-tb-sm flex"><text class="text-cut" v-text="title"></text></view>
			<view class="padding-bottom text-right">{{ test_num }}人已测</view>
			<view class="flex p-xs mb-sm"><image class="radius" :src="image" mode=""></image></view>
		</view>
		<view class="padding bg-white">
			<view class="bg-mauve padding radius"><text class="">此类型测试不能重答，请思考后答题</text></view>
		</view>
		<form>
			<block v-for="(item, index) in question" :key="index">
				<view class="bg-white" v-show="index == subjectIndex">
					<view class="cu-bar">
						<view class="action text-black">
							<text class="cuIcon-title text-mauve"></text>
							{{ item.title }}
						</view>
					</view>
					<view class="padding-lr skip-image" v-if="item.image">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="solid-top margin-top-sm">
						<radio-group class="block" v-if="true">
							<view class="cu-form-group" v-for="(it, index) in item.wen_ti" :key="index" :data-option="it.option" @click="goAnswer">
								<radio
									class="mauve"
									color="#9c26b0"
									:value="it.option"
									:class="item.userAnswer.indexOf(it.option) > -1 ? 'checked' : ''"
									:checked="item.userAnswer.indexOf(it.option) > -1 ? true : false"
								></radio>
								<view class="title flex-sub text-black">{{ it.option }}.{{ it.intro }}</view>
							</view>
						</radio-group>

						<checkbox-group class="block" @change="CheckboxChange" v-else-if="false">
							<view class="cu-form-group" v-for="(it, index) in item.wen_ti" :key="index">
								<checkbox
									:value="it.option"
									:class="item.userAnswer.indexOf(it.option) > -1 ? 'checked' : ''"
									:checked="item.userAnswer.indexOf(it.option) > -1 ? true : false"
								></checkbox>
								<view class="title  text-black">{{ it.option }}.{{ it.intro }}</view>
							</view>
						</checkbox-group>
					</view>
				</view>
			</block>
		</form>
		<!-- <view class="padding flex flex-direction">
			<button class="cu-btn bg-mauve margin-tb-sm lg">上一题</button>
		</view> -->
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default() {
				return '';
			}
		},
		image: {
			type: String,
			default() {
				return '';
			}
		},
		test_num: {
			type: Number,
			default() {
				return 0;
			}
		},
		test_id: {
			type: [Number, String],
			default() {
				return 0;
			}
		},
		question: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			subjectIndex: 0 //跳转索引
		};
	},
	methods: {
		goAnswer: function(e) {		
			let values = e.currentTarget.dataset.option;
			//单选选中
			var items = this.question[this.subjectIndex];			
			this.question[this.subjectIndex].userAnswer = values;
			//到结果
			let result = items.result[items.option.indexOf(values)];
			if (result != 0) {
				let content = [];
				this.question.forEach(item => {
					if (item.userAnswer) {
						content.push({
							main_id: item.main_id,
							question_id: item.question_id,
							userAnswer: item.userAnswer
						});
					}
				});
				this.$api
					.skip_result({
						test_id: this.test_id,
						number: result,
						content: JSON.stringify(content)
					})
					.then(res => {
						if (res.code) {
							this.$common.successToShow(res.msg, () => {
								uni.redirectTo({
									url: this.$ph.success + `?test_id=${this.test_id}`
								});
							});
						} else {
							this.$common.errorToShow(res.msg);
						}
					});
				return;
			}
			setTimeout(() => {
				//到哪一题
				let question_id = items.skip[items.option.indexOf(values)];
				if (question_id != 0) {
					this.question.forEach((item, index) => {
						//题id
						if (item.question_id == question_id) {
							this.subjectIndex = index;
							return;
						}
					});
					return;
				}
				//跳转下一题
				if (this.subjectIndex < this.question.length - 1) {
					this.subjectIndex += 1; //直接下一题
				}
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.mb-sm{
	image {
		height: 300upx;
		width: 100%;
	}
}
.skip-image{
	image{
		width: 100vw;
		height: 300rpx;
		border-radius: 5rpx;
	}
}
</style>
